import React, { useEffect, useState } from 'react';
import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined } from '@ant-design/icons';
import { Layout, Menu, theme, Image, Breadcrumb, Popover, Button } from 'antd';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import ComMenu from '../components/ComMenu';
import ComTabs from '../components/ComTabs';
import ComBreadcrumb from '../components/ComBreadcrumb';

const { Header, Sider, Content } = Layout;



const Index: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);

    const { token: { colorBgContainer } } = theme.useToken();
    const [ImgSrc, setImgSrc] = useState('')
    const [userName, setUserName] = useState("admin")
    const navigate = useNavigate()



    useEffect(() => {
        const token = localStorage.getItem("token")
        if (token) {
            const user = JSON.parse(localStorage.getItem("user") || '')
            setImgSrc("http://47.98.128.191:3000/temp/" + user.avatar)
            setUserName(user.username)
            setImgSrc(user.avatar)
        } else {
            navigate("/")
        }
    }, [])



    //退出登录
    const LoginOut = () => {
        localStorage.removeItem('token')
        localStorage.removeItem('config')
        localStorage.removeItem('user')
        localStorage.removeItem('roles')
        localStorage.removeItem('exipreTime')
        localStorage.removeItem('permissions')
        navigate('/')
    }

    const content = (
        <div style={{ width: '100px' }}>
            <p>个人中心</p>
            <p>密码修改</p>
            <p className='r-border-top'>系统定制</p>

            <p className='r-border-top' onClick={LoginOut}>
                <a href="#">退出登录</a>
            </p>

        </div>
    );



    return (
        <Layout style={{ height: '100vh' }}>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className='logo ' style={{ height: '30px', marginLeft: '28px', marginTop: '10px' }}>
                    <Image preview={false} width={30} src='http://xawn.f3322.net:8002/distremote/static/img/logo.png' />
                    {collapsed ? '' : <span className='r-text'>赤兔养车</span>}
                </div>
                <ComMenu></ComMenu>
            </Sider>
            <Layout className="site-layout">
                <Header style={{ padding: 0, background: colorBgContainer }} className='r-flex-between'>
                    {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                        className: 'trigger',
                        onClick: () => setCollapsed(!collapsed),
                    })}
                    <Popover content={content}>
                        {/* <Avatar icon={<UserOutlined />} /> */}
                        <img src={`http://xawn.f3322.net:8002/distremote/static/avatar/` + ImgSrc} alt="" style={{ width: '40px', borderRadius: '50%', marginTop: '20px' }} />
                        &nbsp;&nbsp;
                        <span>{userName}</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </Popover>
                </Header>
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        paddingTop: 0,
                        minHeight: 280,
                        background: colorBgContainer,
                        overflow: 'auto'
                    }}
                >
                    <ComTabs />
                </Content>
            </Layout>
        </Layout>
    );
};

export default Index;